<template>
	<view class="house-pages">
		<template v-if="list.length>0">
			<PaymentRecords :info-list="list"></PaymentRecords>
		</template>
		<view v-if="more==false&&list.length==0" class="empty">暂无数据</view>
		<view v-else-if="more==false&&list.length>0" class="empty">没有更多了</view>
		<view class="invoice" @click="navigate('/page_pack/invoice/invoice')">若需开具发票，点击申请</view>
	</view>
</template>

<script>
	import {
		PaymentRecords
	} from '@/components/PaymentRecords/PaymentRecords.vue'
	import {
		obtaiPaymentRecords
	} from '@/api/rent_payment.js'
	import {
		isMore
	} from '@/util/util.js'
	export default {
		components: {
			PaymentRecords
		},
		data() {
			return {
				more: true,
				conf: {
					page: 1,
					limit: 10,
					businessName: '',
				},
				list: []
			}
		},
		methods: {
			handleRefresh() {
				this.conf.page = 1;
				this.more = true
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getPaymentRecords(true)
			},
			getPaymentRecords(refresh = false) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				obtaiPaymentRecords({
					page: this.conf.page,
					limit: this.conf.limit
				}).then(res => {
					let list = res.list || [];
					if (refresh) {
						this.list = list;
					} else {
						this.list = [...this.list, ...list]
					}
					this.more = isMore(this.conf.page, this.conf.limit, res.total)
				})
			},
			onReachBottom() {
				if (this.more) {
					this.conf.page++;
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					this.getPaymentRecords();
				}
			},
		},
		onLoad() {
			this.getPaymentRecords(true)
		},
	}
</script>

<style lang="scss" scoped>
	.house-pages {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;


		.invoice {
			color: $theme-color;
			font-size: 28rpx;
			text-align: center;
			margin-top: 50rpx;
		}
	}
</style>